<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: packages/drawPanel/src/drawPanel.vue</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: packages/drawPanel/src/drawPanel.vue</h1>

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>
&lt;xdh-map-placement :placement="placement" :margin="[10]" theme="light" >
  &lt;div class="xdh-map-draw-panel">
    &lt;div class="inner-warp" :style="{'width': `${width * 50}px`}">
      &lt;slot name="type-buttons">
        &lt;div  class="type-btns-warp clearfix" >
          &lt;div class="button" v-for="(item, index) in buttonList" :key="index" :title="item.name" @click="draw(item.type)">
            &lt;img class="icon" :src="item.img" />
            &lt;div class="name">{{item.name}}&lt;/div>
          &lt;/div>
        &lt;/div>
      &lt;/slot>
      &lt;slot name="tool-buttons">
        &lt;div v-if="useTools" class="tools-btns-warp clearfix">
          &lt;div :class="{'button': true, 'active': editingFeature}" @click="deleteClickHandle">
            删除
          &lt;/div>
          &lt;div v-if="isDrawing" :class="{'button': true, 'active': isDrawing}" @click="cancleClickHandle">
            取消
          &lt;/div>
          &lt;div v-if="!isDrawing &amp;&amp; !isEditing" :class="{'button': true, 'active': oldVersions.length}" @click="resetClickHandle">
            重置
          &lt;/div>
          &lt;div v-if="!isDrawing" :class="{'button': true, 'active': editingFeature}" @click="finishClickHandle">
            完结
          &lt;/div>
          &lt;div :class="{'button': true, 'active': true}" @click="clearClickHandle">
            清空
          &lt;/div>
          &lt;div :class="{'button': true, 'active': true}" @click="getClickHandle">
            获取
          &lt;/div>
        &lt;/div>
      &lt;/slot>
      &lt;slot name="style-tools clearfix">
        &lt;div class="style-btns-warp" v-if="useStyle">
          &lt;div class="color-input-item">
            背景色：&lt;input class="color-select" type="color" v-model="editStyle.fillColor" @change="styleInputChange"  />  
          &lt;/div> 
          &lt;div class="color-input-item">
            背景透明度：
            &lt;!-- &lt;em class="num-btn" @click="editStyle.fillOpacity -= 0.1">-&lt;/em> -->
            &lt;input  class="num-select" type="number" :min="0" :max="1" :step="0.1" v-model="editStyle.fillOpacity" @change="styleInputChange"  />  
            &lt;!-- &lt;em class="num-btn" @click="editStyle.fillOpacity += 0.1">+&lt;/em> -->
          &lt;/div> 

          &lt;div class="color-input-item">
            边框色：&lt;input class="color-select" type="color" v-model="editStyle.strokeColor" @change="styleInputChange"  />  
          &lt;/div> 
          &lt;div class="color-input-item">
            边框宽度：
            &lt;!-- &lt;em class="num-btn" @click="editStyle.strokeWidth -= 1">-&lt;/em> -->
            &lt;input  class="num-select" type="number" :min="0" :max="10" :step="1" v-model="editStyle.strokeWidth" @change="styleInputChange"  />  
            &lt;!-- &lt;em class="num-btn" @click="editStyle.strokeWidth += 1">+&lt;/em> -->
          &lt;/div>
          &lt;div class="color-input-item">
            透明度：
            &lt;!-- &lt;em class="num-btn" @click="editStyle.opacity -= 0.1">-&lt;/em> -->
            &lt;input  class="num-select" type="number" :min="0" :max="1" :step="0.1" v-model="editStyle.opacity" @change="styleInputChange"  />  
            &lt;!-- &lt;em class="num-btn" @click="editStyle.opacity += 0.1">+&lt;/em> -->
          &lt;/div> 
          &lt;!-- &lt;div @click="setStyleOpt">test&lt;/div> -->
        &lt;/div>
      &lt;/slot>
    &lt;/div>
    
  &lt;/div> 
&lt;/xdh-map-placement>
&lt;/template>

&lt;script>
  /**
   * 地图描绘控件
   * @module xdh-map-draw-panel
   */  

   /**
   * 插槽
   * @member slots
   * @property {string} type-buttons 类型按钮容器
   * @property {string} tool-buttons 工具按钮容器
   * @property {string} style-tools 样式工具容器
   * 
   */
  import XdhMapPlacement from 'packages/placement'
  import { getParent, mapReady } from 'utils/util'
  import { parse, colorRgba } from 'utils/style' 
  import OlPlot from 'ol-plot'
  import 'ol-plot/dist/ol-plot.css'
  import { getLayerByLayerName } from 'ol-plot/src/Utils/layerUtils'
   

  const TYPES_ARR = [
    // {type: 'TextArea', name: '文本标绘'},
    {type: 'Point', name: '点'},
    {type: 'Polyline', name: '线'},
    {type: 'Curve', name: '曲线'},
    {type: 'Arc', name: '弓形'},
    {type: 'Circle', name: '圆'},
    {type: 'FreeHandLine', name: '自由线'},
    {type: 'RectAngle', name: '矩形'},
    {type: 'Ellipse', name: '椭圆'},
    {type: 'Lune', name: '弓形'},
    {type: 'Sector', name: '扇形'},
    {type: 'ClosedCurve', name: '闭合曲面'},
    {type: 'Polygon', name: '多边形'},
    {type: 'FreePolygon', name: '自由面'},
    {type: 'GatheringPlace', name: '集结地'},
    {type: 'DoubleArrow', name: '双箭头'},
    {type: 'StraightArrow', name: '细直箭头'},
    {type: 'FineArrow', name: '粗单尖头箭头'},
    {type: 'AttackArrow', name: '进攻方向'},
    {type: 'AssaultDirection', name: '粗单直箭头'},
    {type: 'TailedAttackArrow', name: '进攻方向（尾）'},
    {type: 'SquadCombat', name: '分队战斗行动'},
    {type: 'TailedSquadCombat', name: '分队战斗行动（尾）'},
    {type: 'RectFlag', name: '矩形标志旗'},
    {type: 'TriangleFlag', name: '三角标志旗'},
    {type: 'CurveFlag', name: '曲线标志旗'}
  ]

  const initBtnList = function(vue) {
    let _TYPES_ARR = []
    if (vue.useText) {
      _TYPES_ARR = _TYPES_ARR.concat(TYPES_ARR).concat([{type: 'TextArea', name: '文本标绘'}])
    } else {
      _TYPES_ARR = _TYPES_ARR.concat(TYPES_ARR)
    }
    if (!vue.types.length) {
      return _TYPES_ARR.map((item) => {
        return {
          ...item,
          img: require(`../../../sources/draw-panel/icon/${item.type}.png`)
        }
      })
    } else {
      let arr = []
      vue.types.forEach((item) => {
        if (typeof item === 'string') {
          let target = _TYPES_ARR.find((obj) => {
            return obj.type === item
          })
          if (target) {
            arr.push({
              ...target, 
              img: require(`../../../sources/draw-panel/icon/${target.type}.png`)
            })
          }
        } else {
          let target = _TYPES_ARR.find((obj) => {
            return obj.type === item.type
          })
          if (target) {
            arr.push({
              ...target, 
              ...{img: ''},
              ...{img: require(`../../../sources/draw-panel/icon/${target.type}.png`)}, 
              ...item
            })
          }
        }
      })
      return arr
    }
  }

  export default {
    name: 'XdhMapDrawPanel',
    mixins: [],
    components: {
      XdhMapPlacement 
    },
    /**
     * 参数属性 
     * @member props
     * @property {array} types 画板功能类型，默认为空时表示激活全部功能
     * @property {string} placement 控件在地图的放置方位
     * @property {number} width 长度单位（此width值为按钮的横向排列个数，按钮宽为50px, 控件宽度为 50*width）
     * @property {object} options ol-plot 的 配置项 （略）
     * @property {boolean} editAfterDraw 添加图形后是否直接进入编辑模式（默认true）
     * @property {boolean} isMemory 是否开启记忆功能
     * @property {boolean} useTools 显示工具按钮
     * @property {boolean} useText 使用添加文字功能 （默认false,体验一般）
     * @property {boolean} useStyle 使用样式修改工具 
     */
    props: {
      types: {
        type: Array,
        default: () => { return [] }
      },
      placement: {
        type: String,
        default: 'right-center'
      },
      width: {
        type: Number,
        default: 4
      }, 
      options: {
        type: Object,
        default: () => {
          return {}
        }
      },
      editAfterDraw: {
        type: Boolean,
        default: true
      },
      isMemory: {
        type: Boolean,
        default: true
      },
      useTools: {
        type: Boolean,
        default: true
      },
      useText: {
        type: Boolean,
        default: false
      },
      useStyle: {
        type: Boolean,
        default: true
      } 

    },
    data() { 
      return {
        buttonList: initBtnList(this),
        map: null,
         
        plot: null, 
        
        isDrawing: false,
        isEditing: false,

        editingFeature: null,
        
        oldVersions: [],

        // ----------------
        editStyle: {
          fillColor: '#cccccc',
          fillOpacity: 1,
          fill: '',
          strokeColor: '#000000',
          strokeWidth: 2,
          opacity: 1
        }
      }
    },
    computed: {
    },
    watch: {
      types() {
        this.buttonList = initBtnList(this)
      },
      useText() {
        this.buttonList = initBtnList(this)
      }
    },
    methods: {
      
      ready(map) {
        this.map = map
         
        this.plot = new OlPlot(this.map, {
          zoomToExtent: false,
          ...this.options
        })

        this.plotLayer = getLayerByLayerName(this.map, this.plot.plotUtils.layerName)
        /**
         * 画图工具初始化完成事件
         * @event on-inited
         * @param {Object} plot
         */
        this.$emit('on-inited', this.plot)
      },
      draw(type) {
        if (this.isMemory) {
          this.saveCurrent()
        }

        this.isDrawing = true
        /**
         * 开始添加图形
         * @event on-draw
         */
        this.$emit('on-draw')
        this.plot.plotEdit.deactivate()
        this.isEditing = false 
        this.plot.plotDraw.active(type)
        this.plot.plotDraw.on('drawEnd', this.drawEndHandle)
        
      },
      drawEndHandle(e) {
        this.isDrawing = false
        const feature = e.feature 
        if (this.useStyle) {
          let styleOpt = this.setStyleOpt()
          let style = this.styleInit(styleOpt)
          feature.setStyle(style)
        }
        /**
         * 当前画图完结事件
         * @event on-draw-end
         * @param {Object} feature
         */
        this.$emit('on-draw-end', feature) 
        // feature.setProperties({'id': new Date().getTime()})
        // console.log('feature', feature.getProperties()) 
        if (this.editAfterDraw) {
          this.editingFeature = feature
          this.plot.plotEdit.activate(feature)
          this.isEditing = true
          /**
           * 开始修改图形
           * @event on-edit-start
           * @param {Object} feature
           */
          this.$emit('on-edit-start', feature) 
        } 
      },
      cancleClickHandle() {
        this.finishDraw()
        this.finishEdit()
      },
      
      resetClickHandle() {
        if (this.oldVersions.length) {
          let version = this.oldVersions.pop()
          this.plot.plotUtils.removeAllFeatures()
          this.plot.plotUtils.addFeatures(version)
        }
      }, 
      deleteClickHandle() {
        if (this.editingFeature) {
          this.plot.plotEdit.deactivate()
          this.isEditing = false
          this.plotLayer.getSource().removeFeature(this.editingFeature)
          this.editingFeature = null  
        }
      },
      finishClickHandle() {
        if (this.editingFeature) {
          this.finishEdit()
        } else {
          this.finishDraw()
        }
      },
      clearClickHandle() {
        this.plot.plotUtils.removeAllFeatures()
        this.editingFeature = null
        this.isEditing = false
        this.isDrawing = false
      },
      getClickHandle() {
        let allFeatures = this.plot.plotUtils.getFeatures()
        this.$emit('on-getAll', allFeatures)
        return allFeatures
      },

      finishDraw() {
        if (this.plot.plotDraw.isDrawing()) {
          this.isDrawing = false
          this.plot.plotDraw.disActive()
          /**
           * 添加图形结束事件（不是完结，强制结束）
           * @event on-finish-draw
           */
          this.$emit('on-finish-draw')
        }
      },
      finishEdit() {
        this.plot.plotEdit.deactivate()
        /**
         * 完成修改图形
         * @event on-finish-edit
         */
        this.$emit('on-finish-edit')
        this.editingFeature = null
        this.isEditing = false 
      },
      editFeature(feature) { 
        if (feature &amp;&amp; feature.get('isPlot') &amp;&amp; !this.plot.plotDraw.isDrawing()) {
          if (!this.isEditing) {
            if (this.isMemory) {
              this.saveCurrent()
            }
            this.editingFeature = feature
            this.plot.plotEdit.activate(feature)
            this.isEditing = true
            this.$emit('on-edit-start', feature)
          } else {
            this.finishEdit()
          }
        } else {
          console.log('无法编辑此图形')
        }
      },
      saveCurrent() {
        let version = this.plot.plotUtils.getFeatures()
        if (version.length) {
          this.saveVersion(version)
        }
        return version 
      },
      saveVersion(version) {
        if (this.oldVersions.length &lt; 5) {
          this.oldVersions.push(version)
        } else {
          this.oldVersions.shift()
          this.oldVersions.push(version)
        }
        // console.log('save success', this.oldVersions)
      },
      clearVerson() {
        this.oldVersions = []
      },
      setStyleOpt() {
        let style = {}
        let fillOpacity = Math.max(0, Math.min(this.editStyle.fillOpacity, 1))
        let strokeWidth = Math.max(1, Math.min(this.editStyle.strokeWidth, 10))
        let opacity = Math.max(0, Math.min(this.editStyle.opacity, 1))
        style.fill = colorRgba(this.editStyle.fillColor, fillOpacity)
        style.strokeWidth = strokeWidth
        style.strokeColor = this.editStyle.strokeColor
        style.opacity = opacity

        // console.log('style', style)
        return style 
      },
      styleInit(styleOpt) {
        return parse({
          className: 'Style',
          opacity: styleOpt.opacity,
          fill: {
            className: 'Fill',
            color: styleOpt.fill
          },
          stroke: {
            className: 'Stroke',
            color: styleOpt.strokeColor,
            width: styleOpt.strokeWidth
          }
        })
      },
      styleInputChange() {
        if (this.editingFeature) {
          let styleOpt = this.setStyleOpt()
          let style = this.styleInit(styleOpt)
          this.editingFeature.setStyle(style)
        }
      } 
    },
    created() {
      this.parent = getParent.call(this)
      mapReady.call(this, this.ready)
    },
    mounted() {
       
       
    },
    beforeDestroy() {
       
    }
  }
&lt;/script>
</code></pre>
        </article>
    </section>




</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-xdh-map.html">xdh-map</a></li><li><a href="module-xdh-map-circle.html">xdh-map-circle</a></li><li><a href="module-xdh-map-dialog.html">xdh-map-dialog</a></li><li><a href="module-xdh-map-draw.html">xdh-map-draw</a></li><li><a href="module-xdh-map-draw-arc.html">xdh-map-draw-arc</a></li><li><a href="module-xdh-map-draw-panel.html">xdh-map-draw-panel</a></li><li><a href="module-xdh-map-drawdown.html">xdh-map-drawdown</a></li><li><a href="module-xdh-map-echarts.html">xdh-map-echarts</a></li><li><a href="module-xdh-map-geo-layer.html">xdh-map-geo-layer</a></li><li><a href="module-xdh-map-group.html">xdh-map-group</a></li><li><a href="module-xdh-map-heat.html">xdh-map-heat</a></li><li><a href="module-xdh-map-html.html">xdh-map-html</a></li><li><a href="module-xdh-map-icon.html">xdh-map-icon</a></li><li><a href="module-xdh-map-image.html">xdh-map-image</a></li><li><a href="module-xdh-map-line.html">xdh-map-line</a></li><li><a href="module-xdh-map-mask.html">xdh-map-mask</a></li><li><a href="module-xdh-map-measure.html">xdh-map-measure</a></li><li><a href="module-xdh-map-overview.html">xdh-map-overview</a></li><li><a href="module-xdh-map-panel.html">xdh-map-panel</a></li><li><a href="module-xdh-map-placement.html">xdh-map-placement</a></li><li><a href="module-xdh-map-pointer.html">xdh-map-pointer</a></li><li><a href="module-xdh-map-polygon.html">xdh-map-polygon</a></li><li><a href="module-xdh-map-popup.html">xdh-map-popup</a></li><li><a href="module-xdh-map-rectangle.html">xdh-map-rectangle</a></li><li><a href="module-xdh-map-scatter.html">xdh-map-scatter</a></li><li><a href="module-xdh-map-text.html">xdh-map-text</a></li><li><a href="module-xdh-map-track.html">xdh-map-track</a></li><li><a href="module-xdh-map-type.html">xdh-map-type</a></li><li><a href="module-xdh-map-warp.html">xdh-map-warp</a></li><li><a href="module-xdh-map-zoom.html">xdh-map-zoom</a></li><li><a href="module-xdh-map-zoom-panel.html">xdh-map-zoom-panel</a></li></ul><h3>Classes</h3><ul><li><a href="ol.interaction.areaSelect.html">areaSelect</a></li><li><a href="ol.interaction.drag.html">drag</a></li><li><a href="ol.source.TileSuperMapRest.html">TileSuperMapRest</a></li></ul><h3>Events</h3><ul><li><a href="module-xdh-map-type.html#~event:change">change</a></li><li><a href="module-xdh-map.html#~event:changeType">changeType</a></li><li><a href="module-xdh-map-pointer.html#~event:copy">copy</a></li><li><a href="module-xdh-map-draw.html#~event:drawend">drawend</a></li><li><a href="module-xdh-map-draw.html#~event:drawstart">drawstart</a></li><li><a href="module-xdh-map-draw.html#~event:modifyend">modifyend</a></li><li><a href="module-xdh-map-draw.html#~event:modifystart">modifystart</a></li><li><a href="module-xdh-map-geo-layer.html#~event:mouseEnter">mouseEnter</a></li><li><a href="module-xdh-map-track.html#~event:move">move</a></li><li><a href="global.html#event:on-boxEnd">on-boxEnd</a></li><li><a href="global.html#event:on-boxStart">on-boxStart</a></li><li><a href="global.html#event:on-dragDown">on-dragDown</a></li><li><a href="global.html#event:on-dragMove">on-dragMove</a></li><li><a href="global.html#event:on-dragUp">on-dragUp</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-draw">on-draw</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-draw-end">on-draw-end</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-edit-start">on-edit-start</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-finish-draw">on-finish-draw</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-finish-edit">on-finish-edit</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-inited">on-inited</a></li><li><a href="module-xdh-map-measure.html#~event:on-measureEnd">on-measureEnd</a></li><li><a href="module-xdh-map-drawdown.html#~event:on-toggle">on-toggle</a></li><li><a href="module-xdh-map.html#~event:ready">ready</a></li><li><a href="module-xdh-map-track.html#~event:start">start</a></li><li><a href="module-xdh-map-track.html#~event:stop">stop</a></li></ul><h3>Global</h3><ul><li><a href="global.html#bd09ToGcj02">bd09ToGcj02</a></li><li><a href="global.html#bd09ToGps84">bd09ToGps84</a></li><li><a href="global.html#bd09ToWgs84">bd09ToWgs84</a></li><li><a href="global.html#capitalize">capitalize</a></li><li><a href="global.html#convertToWgs84">convertToWgs84</a></li><li><a href="global.html#createLayer">createLayer</a></li><li><a href="global.html#createTdtLayer">createTdtLayer</a></li><li><a href="global.html#D2R">D2R</a></li><li><a href="global.html#featureStyleRender">featureStyleRender</a></li><li><a href="global.html#gcj02ToBd09">gcj02ToBd09</a></li><li><a href="global.html#gcj02ToWgs84">gcj02ToWgs84</a></li><li><a href="global.html#gcjToGps84">gcjToGps84</a></li><li><a href="global.html#get">get</a></li><li><a href="global.html#getDistance">getDistance</a></li><li><a href="global.html#getParent">getParent</a></li><li><a href="global.html#gps84ToGcj02">gps84ToGcj02</a></li><li><a href="global.html#keyMap">keyMap</a></li><li><a href="global.html#LAYERS">LAYERS</a></li><li><a href="global.html#mapReady">mapReady</a></li><li><a href="global.html#mix">mix</a></li><li><a href="global.html#mixProps">mixProps</a></li><li><a href="global.html#options">options</a></li><li><a href="global.html#outOfChina">outOfChina</a></li><li><a href="global.html#pi">pi</a></li><li><a href="global.html#prefix">prefix</a></li><li><a href="global.html#props">props</a></li><li><a href="global.html#set">set</a></li><li><a href="global.html#StyleMap">StyleMap</a></li><li><a href="global.html#wgs84ToBd09">wgs84ToBd09</a></li><li><a href="global.html#wgs84ToGcj02">wgs84ToGcj02</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Sat Mar 21 2020 16:40:44 GMT+0800 (GMT+08:00)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
